<template>
    <div class="container">
        <div class="title">
            Problem Factory
        </div>
        <div class="line"></div>
        <form class="form">
          <el-row :gutter="20">
            <el-col :span="3">
              <label >Problem count: </label>
            </el-col>
            <el-col :span="3">
              <input v-model.number="form.cnt" type="number">
            </el-col>
            <el-col :span="5">
              <label class="hint">max to 10</label>
            </el-col>
            <el-col :span="3">
              <label >Main Knowledge: </label>
            </el-col>
            <el-col :span="3">
              <input v-model="form.knowledge" type="text">
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="3">
              <label >Students Age: </label>
            </el-col>
            <el-col :span="3">
              <input v-model.number="form.age1" type="number">
            </el-col>
            <el-col :span="1">
              <label class="hint">to</label>
            </el-col>
            <el-col :span="3">
              <input v-model.number="form.age2" type="number">
            </el-col>
            <el-col :span="3" :offset="1">
              <label >Difficulty: </label>
            </el-col>
            <el-col :span="3">
              <select v-model="form.difficulty">
                <option value="1">junior</option>
                <option value="2">senior</option>
                <option value="3">gradient increase</option>
              </select>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6">
              <label>Other Restrictions:</label>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="11">
              <textarea name="" id="" cols="30" rows="5" style="width: 100%;"></textarea>
            </el-col>
            <el-col :span="6" class="submit">
              <button class="submit-btn" type="button" @click="generate()">Generate</button>
            </el-col>
          </el-row>
        </form>
        <div class="problem">
          <div class="generate-problem-list">
            <div class="title-bar">
              <div>
                <text class="title1">Generated</text><text class="hint1">Generated problem list</text>
              </div>
              <div class="options"></div>
            </div>
            <div class="line"></div>
            <div v-if="isLoading">
              <VueSpinner size="20" :loading="isLoading" color="#4A90E2" />
              正在努力生成题目……
            </div>
            <div v-else v-for="(item,index) in generateList" :key="index">
              <div class="problem-title">
                <p>{{ index+1}}.</p>
                <div class="check"  v-if="item.selected==0" @click="select_generated(index)"></div>
                <img class="check" src="@/assets/selected.png" v-else alt="" @click="select_generated(index)">
              </div>
              <p class="problem-content">{{ item.content }}</p>
              <div class="option" v-for="(option, key) in item.options">{{ key }}:<input type="radio" :value="option" v-model="problemContent">{{ option }}</div>
              <div>Correct Answer:<text class="answer">{{ item.correct_answer }}</text></div>
            </div>
          </div>
          <div class="transfer">
            <button class="transfer-btn" :disabled="!isButtonToLeftEnabled" @click="toleft()">To right</button>
            <button class="transfer-btn" :disabled="!isButtonToRightEnabled" @click="toright()">To left</button>
          </div>
          <div class="generate-problem-list">
            <div style="margin-bottom: 5px;">
                <text class="title1">Export</text>  <text class="hint1">Export problem list</text> 
            </div>
           
            <div class="line"></div>
            <div v-for=" (item,index) in exportList" :key="item">
              <div class="problem-title">
                <p>{{ index+1 }}.</p>
                <div class="check" v-if="item.selected==0"  @click="select_generated(index)"></div>
                <img class="check" src="@/assets/selected.png" v-else alt="" @click="select_generated(index)">
              </div>
              <p class="problem-content"> {{ item.content }}</p>
              <div class="option" v-for="(option, key) in item.options">{{ key }}:<input type="radio" :value="option" v-model="problemContent">{{ option }}</div>
              <div>Correct Answer:<text class="answer">{{ item.correct_answer }}</text></div>
            </div>
          </div>
        </div>
        
     
    </div>
  </template>
<script>
import axios from "axios"
import { VueSpinner } from 'vue3-spinners'
export default {
  components: {
    VueSpinner
  },
  data () {
    const generateData = _ => {
      const data = []
      for (let i = 1; i <= 15; i++) {
        data.push({
          key: i,
          label: `备选项${i}`,
          disabled: i % 4 === 0
        })
      }
      return data
    }
    return {
      form: {
        cnt: 3,
        knowledge: 'adjective',
        age1: '5',
        age2: '18',
        difficulty: '3',
        data: generateData(),
        value: [1],
        value4: [1],
        renderFunc (h, option) {
          return "<span>"+option.key+"-"+ option.label+"</span>"        
        }
      },
      problemContent:"",
      isLoading:false,
      generateList: [],
      exportList:[]
    }
  },
  computed: {
    isButtonToLeftEnabled() {
      // 检查数组中是否有至少一个对象的 selected 属性为 1
      return this.generateList.some(item => item.selected === 1);
    },
    isButtonToRightEnabled() {
      // 检查数组中是否有至少一个对象的 selected 属性为 1
      return this.exportList.some(item => item.selected === 1);
    }
  },
  methods: {
    handleSelect (key, keyPath) {
      console.log(key, keyPath)
    },
    toleft(){
       // 过滤出 selected 为 1 的对象
       const filteredItems = this.generateList.filter(item => item.selected === 1);
        // 将过滤出的元素追加到另一个数组中
        this.exportList.push(...filteredItems);
        this.generateList=this.generateList.filter(item => item.selected !== 1);
    },
    toright(){
      const filteredItems = this.exportList.filter(item => item.selected === 1);
        // 将过滤出的元素追加到另一个数组中
        this.generateList.push(...filteredItems);
        this.exportList=this.exportList.filter(item => item.selected !== 1);
    },
    generate() {
      this.isLoading=true
      const that=this
      const url=this.$API_URL+'/problem/generate'
      const formData = new FormData();
      formData.append('knowledge', this.form.knowledge);
      formData.append('cnt',this.form.cnt)
      formData.append('age1',this.form.age1)
      formData.append('age2',this.form.age2)
      formData.append('difficulty',this.form.difficulty)

      // 发送 FormData
      axios.post(url, formData)
        .then(function(response) {
          that.generateList=response.data;
          that.isLoading=false
          ElNotification({
          title: '成功',
          message: '题目生成成功！',
          type: 'success'
        });
        })
        .catch(function (error) {
          console.log(error)
          that.isLoading=false
          ElNotification({
            type: 'error',
            title: '错误',
            message: '题目生成失败！错误信息'+error
          });
        });
      },
      select_generated(index){
        this.generateList[index].selected=1-this.generateList[index].selected
      }
  }
}
</script>
  <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.el-icon-circle-check{
  color:#AAA;
  width: 16px;
  height: 16px;
}
.title-bar{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items:flex-start;
}
.container{
    margin: 10px;
}
.problem-content{
  font-weight: 700;
  margin:5px;
}
.answer{
  font-weight: 600;
  color: #4A90E2;
  margin-left: 10px;
}
.title{
    margin:10px 30px 10px 10px;
    text-align: left;
    font-size: 40px;
    color: #888;
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-weight: bolder;
}
.title1{
  font-size:25px;
  color:#888;
  font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  font-weight:bolder;
}
.hint1{
  color:#BBB;
  font-family:'Courier New', Courier, monospace;
  margin-left: 20px;
}
.line{
    width: 100%;
    height: 1px;
    background-color: #BBB;
}
.form{
    margin: 10px;
    text-align: left;
}
.check{
    width:20px;
    height:20px;
    border:#BBB 2px solid;
    cursor: pointer;
}
.check:hover{
    border:#00AA00 2px solid;
}
.generate-problem-list{
  text-align: left;
  margin:20px;
  border: #BBB 1px solid;
  padding: 10px 20px;
  width:50%;
  min-height:200px;
}
.option{
  margin:5px;
  color:#888;
}
.transfer{
  margin:20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.row{
  width:60%;
  margin: 20px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
label{
  font-size: 20px;
  color: #888;
  font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  font-weight: bolder;
  margin-right: 10px;
  margin-left: 10px;
}
.problem-title{
  font-weight: 700;
  color: #888;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.hint{
  color:#BBB;
  font-size: 16px;
}
.form-item{
  text-align: left;
}
.el-row{
  margin:20px;
}
select{
  width: 170px;
  font-size: 16px;
  height:21.33px;
}
.problem{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items:flex-start;
}
.submit-btn{
  width: 100px;
  height: 40px;
  border-radius: 5px;
  border-style: none;
  background-color: #4095E5;
  color:#FFF;
  line-height: 40px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  font-size: 20px;
  margin:20px;
}
.submit-btn:hover{
  background-color: #4055E5;
}
.transfer-btn{
  width: 100px;
  height: 40px;
  border-radius: 5px;
  border-style: none;
  background-color:cadetblue;
  color:#FFF;
  line-height: 40px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  font-size: 16px;
  margin:20px;

}
.transfer-btn:disabled{
  background-color: #BBB;
  cursor:not-allowed;
}
.submit{
  display: flex;
  justify-content:center; 
  align-items: center;
  height:80px;
}
input{
  font-size: medium;
}

</style>
